<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-form v-loading="saveLoading" size="small" ref="form" :model="form" :rules="rules" label-width="120px" @submit.native.prevent>
        <el-form-item label="所属房屋：" prop="houseType">
          <el-input v-model="form.leaseCertificateNumber" placeholder="所属房屋" style="width: 450px">
          </el-input>
        </el-form-item>
        <el-form-item label="收费标准：" prop="leaseCertificateNumber">
          <el-input v-model="form.leaseCertificateNumber" placeholder="租赁证编号" style="width: 450px">
          </el-input>
        </el-form-item>
        <el-form-item label="月租金：" prop="areaName">
          <el-select v-model="form.areaName" placeholder="月租金" style="width: 450px">
            <el-option
                v-for="item in houseTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.label"
            ></el-option>
          </el-select>
          <el-button @click="onSubmit" style="margin-left: 20px">产看明细</el-button>
        </el-form-item>
        <el-form-item label="当前承租人：" prop="houseType">
          <el-input v-model="form.leaseCertificateNumber" placeholder="建筑面积" style="width: 450px">
          </el-input>
        </el-form-item>
        <el-form-item label="第几承租人：" prop="leaseCertificateNumber">
          <el-input v-model="form.leaseCertificateNumber" placeholder="使用面积" style="width: 450px">
          </el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="buildingNumber">
          <el-input
              type="textarea"
              v-model="form.buildingNumber"
              style="width: 450px"
              maxlength="300"
              show-word-limit
              class="custom-textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态：" prop="buildingNumber">
          <el-select v-model="form.buildingNumber" placeholder="状态" style="width: 450px">
            <el-option
                v-for="item in houseTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button v-loading="saveLoading" element-loading-background="rgba(0, 0, 0, 0.3)" type="primary"
                     @click="handlerSubmit" v-has-permi="['admin:house:information:save']">保存
          </el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 弹窗 -->
    <el-dialog
        title="单元管理"
        :visible.sync="dialogVisible"
        width="300px"
        :modal="false"
        @close="resetForm"
        custom-class="right-dialog">
      <el-form :model="dialogForm" ref="dialogForm" label-width="100px">
        <el-form-item label="名称：" prop="name" required>
          <el-input v-model="dialogForm.name" placeholder="请输入单元名称"></el-input>
        </el-form-item>
        <el-form-item label="父级：" prop="parent">
          <el-input v-model="dialogForm.parent" disabled placeholder="12号楼"></el-input>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-switch v-model="dialogForm.status"></el-switch>
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input-number v-model="dialogForm.sort" :min="1" :max="999"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {amountSave} from "@/api/payment";

export default {
  components: {},
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return {rules: []}
      }
    },
  },
  data() {
    return {
      form: {
        id: null,
        houseType:'',
        leaseCertificateNumber:'',
        areaName:'',
        streetName:'',
        courtyardNumber: '',
        unitNumber: 0,
        buildingNumber: 0,
        roomNumber: 0,
        buildingArea:'',
        usableArea:'',
        houseStatus:'',
      },
      rules: {
        houseType: [{required: true, message: '请选择房屋类型', trigger: ['blur']}],
        leaseCertificateNumber: [{required: true, message: '请填写租赁证编号', trigger: ['blur']}],
        areaName: [{required: true, message: '请选择片区', trigger: ['blur']}],
        streetName: [{required: true, message: '请选择街（巷、路）', trigger: ['blur']}],
        courtyardNumber: [{required: true, message: '请选择号（楼、院）', trigger: ['blur']}],
        unitNumber: [{required: true, message: '请选择unitNumber', trigger: ['blur']}],
        buildingNumber: [{required: true, message: '请选择楼号', trigger: ['blur']}],
        roomNumber: [{required: true, message: '请选择房号', trigger: ['blur']}],
      },
      saveLoading: false,
      formLoading: false,
      houseTypeOptions: [{
        value: '1',
        label: '直管公房'
      }, {
        value: '2',
        label: '廉租房'
      }, {
        value: '3',
        label: '公租房'
      }, {
        value: '4',
        label: '经济适用房'
      }, {
        value: '5',
        label: '过渡房'
      }, {
        value: '6',
        label: '代管产'
      }, {
        value: '7',
        label: '廉租住房'
      }],
      dialogVisible: false, // 控制弹窗显示/隐藏
      houseData: [
        { building: '1号楼', room: '101' },
        { building: '1号楼', room: '102' },
        { building: '2号楼', room: '201' },
      ], // 楼号和房号数据
      dialogForm: {
        name: '',
        parent: '12号楼',
        status: true,
        sort: 1
      }
    }
  },
  mounted() {
    if (this.isCreate === 1) {
      this.getDetail();
    }
  },
  methods: {
    getDetail() {
      this.form = this.editData
    },
    handlerSubmit() {
      if (this.saveLoading) {
        return
      }
      this.$refs.form.validate(valid => {
        if (!valid) return;
        this.saveLoading = true;
        amountSave(this.form).then(() => {
          this.$message.success('保存成功');
          this.close();
        }).finally(() => {
          this.saveLoading = false
        })
      })
    },
    onSubmit() {
      this.dialogVisible = true; // 打开弹窗
    },
    handleClose() {
      this.dialogVisible = false; // 关闭弹窗
    },
    close() {
      this.$emit('hideEditDialog');
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false;
    },
    // 重置表单
    resetForm() {
      this.$refs.dialogForm.resetFields();
    },
    submitForm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          // 这里可以添加提交表单的逻辑，例如发送API请求保存数据
          console.log('提交单元管理表单', this.dialogForm);
          this.closeDialog();
        } else {
          console.log('表单验证失败');
        }
      });
    },
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}


/* 自定义弹窗样式 */
.right-dialog {
  position: fixed;
  top: 0;
  left:60%; /* 定位到页面最右侧 */
  bottom: 0;
  margin: 0 !important; /* 清除默认 margin */
  height: 100vh !important; /* 高度占满整个视口 */
  width: 40% !important; /* 宽度为 30% */
  transform: none !important; /* 清除默认 transform */
  .el-dialog__header {
    text-align: left;
    padding: 20px; /* 根据需要调整 */
  }

  .el-dialog__body {
    height: calc(100% - 130px); /* 假设头部和底部总高度是100px, 可以根据实际情况调整 */
    overflow-y: auto; /* 如果内容超出，启用垂直滚动 */
  }

  .el-dialog__footer {
    padding: 10px; /* 根据需要调整 */
    text-align: right;
  }
}
::v-deep .el-textarea .el-input__count {
  position: absolute;
  right: -50px;
  bottom: 0;
  background: transparent;
}

</style>
